<template>
<div>
    <show-info v-if="isShow"></show-info>
    <button @click="isShow = !isShow">销毁加载</button>
</div>
</template>
<script>
import ShowInfo from './ShowInfo.vue'
import { onMounted, onUpdated ,onBeforeMount, onUnmounted, onBeforeUpdate,onBeforeUnmount,onActivated,onDeactivated,  ref} from 'vue'
    export default {
        components:{ShowInfo},
        setup(){
            const isShow = ref(true)
            // 在执行setup函数的过程中,要注册别的生命周期函数
            onBeforeMount(()=>{
                console.log("onBeforeMount");
            })
            onMounted(()=>{
                console.log("onMounted");
            })
            onUpdated(()=>{
                console.log("onUpdated");
            })
            onUnmounted(()=>{
                console.log("onUnmounted");
            })
            onBeforeUpdate(()=>{
                console.log("onBeforeUpdate");
            })
            onBeforeUnmount(()=>{
                console.log("onBeforeUnmount");
            })
            onActivated(()=>{
                console.log("onActivated");
            })
            
            onDeactivated(()=>{
                console.log("onDeactivated");
            })
            
                return{
                    isShow
                }
        }
    }
</script>
<style  scoped>
    /*局部css 支持css3 可以改变elementUI组件的样式 且组件样式调整只在本页面生效**/
    /*主样式*/
</style>